<template>

  <div class="coupon">
    <el-tabs v-model="coupontype"
      @tab-click="handleClick">
      <el-tab-pane label="平台满减券"
        name="2">
        <div class="usercoupon">
          <el-table :data="userData"
            style="width:100%"
            max-height="600"
            :cell-style="tc"
            :header-cell-style="tccolor">
            <el-table-column label='券类型' prop='coupon_word'></el-table-column>
            <el-table-column prop='name'
              label='券名称'></el-table-column>
            <el-table-column prop='voucher_quantity'
              label='库存数'></el-table-column>
            <el-table-column label='已领取/核销数量'>
              <template slot-scope="scope">
                <p v-if='scope.row.voucher_grant && scope.row.voucher_use'>{{scope.row.voucher_grant}}/{{scope.row.voucher_use}}</p>
                <p v-if='!scope.row.voucher_grant && scope.row.voucher_use'>---/{{scope.row.voucher_use}}</p>
                <p v-if='scope.row.voucher_grant && !scope.row.voucher_use'>{{scope.row.voucher_grant}}/---</p>
                <p v-if='!scope.row.voucher_grant && !scope.row.voucher_use'>---/---</p>
              </template>
            </el-table-column>
            <el-table-column label='状态'>
              <template slot-scope="scope">
                <p>{{scope.row.status_word}}</p>
                <!-- <p v-if="scope.row.status ==0">已下架</p> -->
              </template>
            </el-table-column>
            <el-table-column prop='created_at'
              label='创建时间'></el-table-column>
          </el-table>
          <el-col :span="24">
            <div class="pagination">
              <el-pagination background
                @current-change="userpageChange"
                :current-page="userpage"
                :page-size="10"
                layout="total, prev, pager, next, jumper"
                :total="usertotal"></el-pagination>
            </div>
          </el-col>
        </div>
      </el-tab-pane>

      <el-tab-pane label="现金券"
        name="1">
        <div class="usercoupon">
         <el-table :data="cashData"
            style="width:100%"
            max-height="600"
            :cell-style="tc"
            :header-cell-style="tccolor">
            <el-table-column label='券类型' prop='coupon_word'></el-table-column>
            <el-table-column prop='name'
              label='券名称'></el-table-column>
            <el-table-column prop='voucher_quantity'
              label='库存数'></el-table-column>
            <el-table-column label='已领取/核销数量'>
              <template slot-scope="scope">
                <p v-if='scope.row.voucher_grant && scope.row.voucher_use'>{{scope.row.voucher_grant}}/{{scope.row.voucher_use}}</p>
                <p v-if='!scope.row.voucher_grant && scope.row.voucher_use'>---/{{scope.row.voucher_use}}</p>
                <p v-if='scope.row.voucher_grant && !scope.row.voucher_use'>{{scope.row.voucher_grant}}/---</p>
                <p v-if='!scope.row.voucher_grant && !scope.row.voucher_use'>---/---</p>
              </template>
            </el-table-column>
            <el-table-column label='状态'>
              <template slot-scope="scope">
                <p>{{scope.row.status_word}}</p>
                <!-- <p v-if="scope.row.status ==0">已下架</p> -->
              </template>
            </el-table-column>
            <el-table-column prop='create_time'
              label='创建时间'></el-table-column>
          </el-table>
          <el-col :span="24">
            <div class="pagination">
              <el-pagination background
                @current-change="cashpageChange"
                :current-page="cashpage"
                :page-size="10"
                layout="total, prev, pager, next, jumper"
                :total="cashtotal"></el-pagination>
            </div>
          </el-col>
        </div>
      </el-tab-pane>

      <el-tab-pane label="支付宝券"
        name="3">
        <div class="usercoupon">
          <el-table :data="zhifuData"
            style="width:100%"
            max-height="600"
            :cell-style="tc"
            :header-cell-style="tccolor">
            <el-table-column label='券类型' prop='coupon_word'></el-table-column>
            <el-table-column prop='name'
              label='券名称'></el-table-column>
            <el-table-column prop='voucher_quantity'
              label='库存数'></el-table-column>
            <el-table-column label='已领取/核销数量'>
              <template slot-scope="scope">
                <p v-if='scope.row.voucher_grant && scope.row.voucher_use'>{{scope.row.voucher_grant}}/{{scope.row.voucher_use}}</p>
                <p v-if='!scope.row.voucher_grant && scope.row.voucher_use'>---/{{scope.row.voucher_use}}</p>
                <p v-if='scope.row.voucher_grant && !scope.row.voucher_use'>{{scope.row.voucher_grant}}/---</p>
                <p v-if='!scope.row.voucher_grant && !scope.row.voucher_use'>---/---</p>
              </template>
            </el-table-column>
            <el-table-column label='状态'>
              <template slot-scope="scope">
                <p>{{scope.row.status_word}}</p>
                <!-- <p v-if="scope.row.status ==0">已下架</p> -->
              </template>
            </el-table-column>
            <el-table-column prop='created_at'
              label='创建时间'></el-table-column>
          </el-table>
          <el-col :span="24">
            <div class="pagination">
              <el-pagination background
                @current-change="zhifupageChange"
                :current-page="zhifupage"
                :page-size="10"
                layout="total, prev, pager, next, jumper"
                :total="zhifutotal"></el-pagination>
            </div>
          </el-col>
        </div>
      </el-tab-pane>
    </el-tabs>
    <!-- <el-input placeholder="输入商品名称或者id搜索"
      v-model="keywords"
      clearable
      size='small'
      class="goodsname">
      <i slot="suffix"
        class="el-input__icon el-icon-search"
        @click="searchCoupons"></i>
    </el-input> -->
  </div>
</template>

<script>
import {shopCouponTypeData} from '@/api/shopdetail';
export default {
  props:['shopId'],
  data () {
    return {
      coupontype: '2',
      // keywords: '',

      userData: [],
      userpage: 1,
      usertotal: 0,


      cashData: [],
      cashpage: 1,
      cashtotal: 0,

      zhifuData: [],
      zhifupage: 1,
      zhifutotal: 0,
    }
  },
  mounted (){
     this.getshopCouponTypeData(this.shopId)
  }, 
  watch: {
      shopId(newValue){
        if(newValue){
          this.getshopCouponTypeData(this.shopId)
        }
      }
  },
  methods: {

    async getshopCouponTypeData(shopId){
      var url='';
      
      if(Number(this.coupontype) == 2){
         url =  '&page='+this.userpage
      }else if(Number(this.coupontype) == 1){
        url =  '&page='+this.cashpage
      }else if(Number(this.coupontype) == 3){
        url =  '&page='+this.zhifupage
      }

      let res = await shopCouponTypeData(shopId,this.coupontype,url)
      // this.goodNum = res.data.on_sale_count
    
      if(Number(this.coupontype) == 2){
         this.userData = res.data.data
      this.usertotal = res.data.total
      }else if(Number(this.coupontype) == 1){
        this.cashData = res.data
      this.cashtotal = res.total
      }else if(Number(this.coupontype) == 3){
        this.zhifuData = res.data.data
      this.zhifutotal = res.data.total
      }


    },
    handleClick () {
      this.getshopCouponTypeData(this.shopId)
    },
    // searchCoupons () {

    // },

    userpageChange (page) {
      this.userpage = page
      //获取数据
      this.getshopCouponTypeData(this.shopId)
    },

    cashpageChange(page){
       this.cashpage = page
       this.getshopCouponTypeData(this.shopId)
    },

    zhifupageChange(page){
     this.zhifupage = page
     this.getshopCouponTypeData(this.shopId)
    },
    tc () {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor () {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
    },
  }
}
</script>

<style scoped>
.coupon {
  position: relative;
}
.goodsname {
  position: absolute;
  top: -5px;
  right: 20px;
  width: 200px;
}
.usercoupon {
  padding: 0 20px 0 0;
}
.pagination {
  float: right;
  margin-top: 15px;
}
</style>